<template>
  <el-dialog v-dialogDrag
             title="任务执行列表"
             :close-on-click-modal="true"
             :before-close="closeBefore"
             :visible.sync="visible">
    <div style="height: 600px;overflow: auto; padding-right: 10px;">

    <el-form :inline="true" :model="searchForm" ref="searchForm" style="text-align: right;">

<!--      <el-form-item>
        <el-input v-model="searchForm.batchExecLogId" placeholder="批次日志ID" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="searchForm.batchTriggerTime" placeholder="批次号" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="searchForm.taskExecLogId" placeholder="任务日志ID" clearable></el-input>
      </el-form-item>-->
      <el-form-item>
        <!--<el-input v-model="searchForm.execStatus" placeholder="执行状态" clearable></el-input>-->
        <el-select v-model="searchForm.execStatus" filterable placeholder="请选择运行状态" style="width:100%"
                   @change="queryList()">
          <el-option label="全部-运行状态" value=""></el-option>
          <template v-for="(item, index) in dict.ExecStatus">
            <el-option :label="item.value +': '+ item.label" :value="item.value"></el-option>
          </template>
        </el-select>
      </el-form-item>
      <el-form-item label="自动刷新" style="width:160px">
        <el-select  v-model="searchForm.time" style="width:80px"
                    @change="startLoop()">
          <el-option label="关闭" value="0"></el-option>
          <el-option label="5秒" value="5"></el-option>
          <el-option label="10秒" value="10"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <!--<el-button type="primary" @click="queryList(1)">查询</el-button>-->
<!--        <el-button type="" @click="addEntity()">新增</el-button>
        <el-button type="danger" @click="deleteEntity()" :disabled="dataListSelections.length <= 0">批量删除</el-button>-->
      </el-form-item>
    </el-form>

    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      style="width: 100%;">
           <!--<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>-->

  <!--         <el-table-column prop="batchCode"  label="批次编号" header-align="center" align="center"></el-table-column>
           <el-table-column prop="taskCode"  label="任务编号" header-align="center" align="center"></el-table-column>-->
           <el-table-column prop="jobCode"  label="作业编号" header-align="center" align="center"></el-table-column>
           <!--<el-table-column prop="batchTriggerTime"  label="批次号" header-align="center" align="center"></el-table-column>-->
<!--           <el-table-column prop="taskExecLogId"  label="任务执行日志ID" header-align="center" align="center"></el-table-column>
           <el-table-column prop="jobExecLogId"  label="作业执行日志ID" header-align="center" align="center"></el-table-column>-->
           <el-table-column prop="taskTriggerTime"  label="任务号" header-align="center" align="center"></el-table-column>

           <!--<el-table-column prop="execDate"  label="执行日期" header-align="center" align="center"></el-table-column>-->
           <!--<el-table-column prop="appMode"  label="应用模式" header-align="center" align="center"></el-table-column>
           <el-table-column prop="appJarName"  label="应用名称" header-align="center" align="center"></el-table-column>
           <el-table-column prop="appRunMode"  label="运行模式" header-align="center" align="center"></el-table-column>
           <el-table-column prop="execStartupCmd"  label="执行启动命令" header-align="center" align="center"></el-table-column>-->
           <el-table-column prop="execStatus"  label="执行状态" header-align="center" align="center">
             <template slot-scope="scope">
               <el-tooltip placement="bottom-end">
                 <div slot="content">{{scope.row.execResult}}</div>
                 <template v-for="(item, index) in dict.ExecStatus">
                   <el-tag v-if="item.value == scope.row.execStatus" :type="item.style">
                     {{item.value}}: {{item.label}}
                   </el-tag>
                 </template>
               </el-tooltip>
             </template>
           </el-table-column>
           <!--<el-table-column prop="execResult"  label="执行结果" header-align="center" align="center"></el-table-column>
           <el-table-column prop="execErrorNum"  label="异常错误累计次数" header-align="center" align="center"></el-table-column>-->
           <el-table-column prop="agentIpv4"  label="执行器IP" header-align="center" align="center"></el-table-column>
<!--           <el-table-column prop="startupTime"  label="启动时间" header-align="center" align="center" width="160"></el-table-column>
           <el-table-column prop="endTime"  label="结束时间" header-align="center" align="center" width="160"></el-table-column>-->
            <el-table-column prop="execTime"  label="执行耗时" header-align="center" align="center" width="100">
              <template slot-scope="scope">
                <el-tooltip placement="bottom-end">
                  <div slot="content">开始时间：{{scope.row.startupTime}}<br/>结束时间：{{scope.row.endTime}}</div>
                  <div>{{scope.row.execTime}}</div>
                </el-tooltip>
              </template>
            </el-table-column>
           <!--<el-table-column prop="createTime"  label="创建时间" header-align="center" align="center"></el-table-column>
           <el-table-column prop="updateTime"  label="更新时间戳" header-align="center" align="center"></el-table-column>-->

           <el-table-column label="操作" fixed="right" header-align="center" align="center" width="80">
             <template slot-scope="scope">
                <el-button type="text" size="small" @click="showDetail(scope.row)">详细</el-button>
             </template>
           </el-table-column>
    </el-table>
<!--    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="page"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>-->
    <!-- 弹窗, 新增 / 修改 -->
<!--    <add-entity v-if="addEntityVisible" ref="addEntity" @refreshDataList="queryList"></add-entity>
    <mod-entity v-if="modEntityVisible" ref="modEntity" @refreshDataList="queryList"></mod-entity>-->
    <show-detail v-if="showDetailVisible" ref="showDetail"></show-detail>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="closeBefore">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
  //import AddEntity from './task-exec-agent-log-list-add'
  //import ModEntity from './task-exec-agent-log-list-mod'
  //import ShowDetail from './agent-exec1-log-detail'
  import ShowDetail from './agent-job-log-detail'
  import {mapState} from "vuex";

  export default {
    data() {
      return {

        timer: null,
        rowData: {},
        visible: false,
        searchForm: {
          'time' : '10',
          'batchExecLogId': '',
          'batchTriggerTime': '',
          'execStatus': '',
        },
        dataList: [],
        page: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        dataListSelections: [],
        addEntityVisible: false,
        modEntityVisible: false,
        showDetailVisible: false
      }
    },
    components: {
      //AddEntity, ModEntity,
      ShowDetail
    },
    created() {
      if (this.timer) {
        clearTimeout(this.timer)
      }
    },
    beforeDestroy() {
      this.searchForm.time = 0;
      if (this.timer) {
        clearTimeout(this.timer)
      }
    },
    activated() {
      // this.queryList()
      if (this.timer) {
        clearTimeout(this.timer)
      }
    },
    computed: mapState({
       // listType: state => state.goods.listType
    }),
    mounted() {
      // 数据字典查询
      //this.getSelectDict('FlowType').then((res) => {
      //  this.$store.commit('goods/updateListType', res)
      //})
      if (this.timer) {
        clearTimeout(this.timer)
      }
    },
    methods: {
      init(id, data) {
        if (this.timer) {
          clearTimeout(this.timer)
        }
        this.timer = null;
        this.searchForm.time = '10';

        this.visible = true
        this.rowData = data
        this.$nextTick(() => {
          this.$refs['searchForm'].resetFields();
          this.searchForm.batchExecLogId = data.batchExecLogId;
          this.searchForm.batchTriggerTime = data.batchTriggerTime;
          this.queryList();
        });
      },
      closeBefore(){
        if (this.timer) {
          clearTimeout(this.timer)
        }
        this.timer = null;
        this.time = 0;
        this.visible = false
      },
      // 获取数据列表
      queryList() {
        this.dataListLoading = true
        let obj = {
        }

        obj = Object.assign(obj, this.searchForm)
        this.getTableList('/api/jobExec1Log/agent/logs', obj, (data) => {
          this.dataListLoading = false
          if (data.code == '000000' && data.rows && data.rows.length > 0) {
            this.dataList = data.rows
            this.totalPage = data.total
          } else {
            this.dataList = []
            this.totalPage = 0
          }
        });
        let timeCy = parseInt(this.searchForm.time);
        if(timeCy > 0){
          this.timer =  setTimeout(this.queryList, timeCy * 1000);
        }
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val
        this.page = 1
        this.queryList()
      },
      // 当前页
      currentChangeHandle(val) {
        this.page = val
        this.queryList()
      },
      // 多选
      selectionChangeHandle(val) {
        this.dataListSelections = val
      },
      // 新增
      addEntity() {
        this.addEntityVisible = true
        this.$nextTick(() => {
          this.$refs.addEntity.init()
        })
      },
      // 修改
      modEntity(row) {
        let cloneData = Object.assign({}, row)
        this.modEntityVisible = true
        this.$nextTick(() => {
          this.$refs.modEntity.init(cloneData)
        })
      },
      showDetail(row) {
        let cloneData = Object.assign({}, row)
        this.showDetailVisible = true
        this.$nextTick(() => {
          this.$refs.showDetail.init(cloneData.id, cloneData)
        })
      },
      // 删除
      deleteEntity(id) {
        var ids = id ? [id] : this.dataListSelections.map(item => {
          return item.id
        })
        this.$confirm(`确定对[id=${ids.join(',')}]进行删除操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          	let obj = {"ids" : ids}
            this.getTableList('/api/task-exec-agent-log-listDel', obj, (data) => {
            if (data && data.code ===  '000000' ) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1000,
                onClose: () => {
                  this.queryList()
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        })
      }
    }
  }
</script>